<template>
  <div class="content">
    <h3 class="title">Hello!</h3>
    <p class="welcome">欢迎登录</p>
    <div class="login_form">
      <div class="frow frow1">
        <input
          v-model="params.account"
          type="text"
          placeholder="请填写用户名"
        />
      </div>
      <div class="frow frow2">
        <input
          v-model="params.password"
          type="password"
          placeholder="请填写密码"
        />
      </div>
    </div>
    <div class="login_submit" @click="submit()">登录</div>
  </div>
</template>

<script>
import { login } from "@api/user";
import store from "@/store";

export default {
  name: "Login",
  data() {
    return {
      params: {
        account: "",
        password: "",
      },
    };
  },
  methods: {
    submit() {
      login(this.params)
        .then((res) => {
          console.log("res", res);
          if (res.code == 1) {
            store.commit("LOGIN", res.data.userinfo);
            this.$router.push({name: "Manage"});
          }
        })
        .catch((err) => {
          this.$dialog.error(err.msg);
        });
    },
  },
};
</script>

<style scoped>
.content {
  width: 100%;
  height: 100%;
  background: url("../assets/images/loginbg.png") no-repeat bottom;
  background-size: 100%;
  overflow: hidden;
}
.content .title {
  width: 100%;
  margin: 2.66667rem 0 0.16rem 1.33333rem;
  font-size: 0.85333rem;
  font-weight: 600;
  color: #333;
  line-height: 0.85333rem;
}
.content .welcome {
  width: 100%;
  height: 0.48rem;
  margin: 0 0 0.72rem 1.33333rem;
  font-size: 0.48rem;
  color: #333;
  line-height: 0.48rem;
}
.content .login_form {
  width: 300px;
  margin: 0 auto 30px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-align-content: center;
  align-content: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.content .frow {
  width: 100%;
  height: 44px;
  margin-bottom: 30px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #ccc;
  overflow: hidden;
}
.content .frow input {
  width: 100%;
  padding: 0 20px 0 40px;
  border: 0;
  line-height: 44px;
  background-color: transparent !important;
}
.content .frow.frow1 {
  background: url()
    no-repeat 10px;
  background-size: 20px;
}
.content .frow.frow2 {
  background: url()
    no-repeat 10px;
  background-size: 20px;
}
.content .login_submit {
  width: 300px;
  height: 46px;
  margin: 0 auto;
  background: #469464;
  border-radius: 23px;
  font-size: 16px;
  color: #fff;
  line-height: 46px;
  text-align: center;
}
</style>